<!--
@description ：操作台
-->

<template>
  <div>
    <el-form :model="form" ref="form">
    <el-tabs tab-position="left" v-model="actived">
      <el-tab-pane label="短信联系" name="1">
            <el-row :gutter="24">
              <el-col :span="24" style="margin: 12px">本月剩余短信条数: 203条</el-col>
              <el-col :span="9">
                <el-form-item prop="a" label="短信发送至">
                  <el-select v-model="form.a" style="width: 240px">
                    <el-option v-for="item in enumopt.personList" :key="item.dictValue" :label="item.remark + '-' + item.dictLabel" :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="9">
                <el-form-item prop="b" label="短信模版">
                  <el-select v-model="form.a" style="width: 240px">
                    <el-option v-for="item in enumopt.noteTempList" :key="item.dictValue" :label="item.dictLabel" :value="item.dictValue"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item prop="msg" label="短信内容预览" style="width: 840px">
                  <el-input v-model="form.msg" type="textarea" :rows="3"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <div class="formBtn">
              <el-button type="primary" size="mini">立即发送</el-button>
              <el-button type="info" style="color: rgb(66, 101, 237)" size="mini">定时发送</el-button>
            </div>
      </el-tab-pane>
      <el-tab-pane label="面访联系" name="2">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item prop="c" label="面访文件上传">
              <el-upload
                class="upload-demo"
                drag
                action="#"
                multiple>
                <i class="el-icon-upload2" style="font-size: 36px;margin-top: 42px"></i>
                <div class="el-upload__text">点击或将文件拖拽到这里上传</div>
                <div class="el-upload__text">支持扩展名：rar.zip.doc.docx.pdf.jpg.</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="16"></el-col>
        </el-row>
        <div class="formBtn">
          <el-button type="primary" size="mini">保存至当前服务记录中</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="网络联系" name="3">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item prop="c" label="网络沟通证明上传">
              <el-upload
                class="upload-demo"
                drag
                action="#"
                multiple>
                <i class="el-icon-upload2" style="font-size: 36px;margin-top: 42px"></i>
                <div class="el-upload__text">点击或将文件拖拽到这里上传</div>
                <div class="el-upload__text">支持扩展名：rar.zip.doc.docx.pdf.jpg.</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="16"></el-col>
        </el-row>
        <div class="formBtn">
          <el-button type="primary" size="mini">保存至当前服务记录中</el-button>
          <el-button type="primary" size="mini">到企微去沟通</el-button>
        </div>
      </el-tab-pane>
      <el-tab-pane label="电话联系" name="4">
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item prop="c" label="录音文件上传">
              <el-upload
                class="upload-demo"
                drag
                action="#"
                multiple>
                <i class="el-icon-upload2" style="font-size: 36px;margin-top: 42px"></i>
                <div class="el-upload__text">点击或将文件拖拽到这里上传</div>
                <div class="el-upload__text">支持扩展名：mp3.mov.</div>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="16"></el-col>
        </el-row>
        <div class="formBtn">
          <el-button type="primary" size="mini">保存至当前服务记录中</el-button>
          <el-button type="primary" size="mini">读取电话盒子</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
    </el-form>
  </div>
</template>
<script>

export default {
  name: "operatingFloor", //操作台
  props:{

  },
  components:{

  },
  data(){
    return{
      actived: '1',

      form: {
         a: '',
        b: '1',
        msg: '【XX人寿】尊敬的刘一伟先生您好，您的保单727261139即将到应交期，此次需交纳保费为5000.00元，请确保您6812尾号的银行卡中有足够的 余额，如有任何问题请随时联系您的服务人员赵勤：18726637283。祝您生活愉快！'
      },

      enumopt: {
         personList: [
           { dictLabel: '刘一伟', dictValue: '1', remark: '投保人' },
           { dictLabel: '陈雪', dictValue: '2', remark: '被保人' },
           { dictLabel: '刘大峰', dictValue: '3', remark: '受益人' },
         ],
         noteTempList: [
           { dictLabel: '交前提醒模版', dictValue: '1' }
         ],
      }
    }
  },
  watch:{

  },
  methods:{

  },
  mounted() {

  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

::v-deep{
  .el-tabs__item.is-active {
    border: 2px solid rgb(66, 101, 237);
    border-radius: 4px 0px 0px 4px;
    color: rgb(66, 101, 237);
    background: #fff;
  }
  .el-tabs__item{
    padding: 8px 16px;
    margin-bottom: 12px;
    border-radius: 4px 0px 0px 4px;
    background: rgb(242, 242, 242);
    color: rgb(20, 21, 20);
  }
  .el-tabs--left .el-tabs__active-bar.is-left{
    display: none;
  }
  .el-tabs--left .el-tabs__header.is-left{
    margin-right: 1px;
  }
  .el-tab-pane{
    box-sizing: border-box;
    border: 1px solid rgb(158, 158, 158);
    padding: 8px;
    margin: 0!important;
    border-radius: 0px 4px 4px 4px;
    min-height: 300px;
  }
}

.formBtn{
  margin: 8px 0 12px 12px;
}

</style>
